<template>
  <div class="hotel-orders-page">
    <h2 class="title">我的酒店订单</h2>
    <el-table :data="orders" v-loading="loading" border style="width: 100%">
      <el-table-column prop="orderNo" label="订单号" width="180" />
      <el-table-column prop="hotelId" label="酒店ID" width="100" />
      <el-table-column prop="roomType" label="房型" width="120" />
      <el-table-column prop="checkInDate" label="入住日期" width="120" />
      <el-table-column prop="checkOutDate" label="离店日期" width="120" />
      <el-table-column prop="nights" label="晚数" width="60" />
      <el-table-column prop="roomCount" label="房间数" width="80" />
      <el-table-column prop="guestCount" label="入住人数" width="80" />
      <el-table-column prop="contactName" label="联系人" width="100" />
      <el-table-column prop="contactPhone" label="联系电话" width="120" />
      <el-table-column prop="totalAmount" label="订单金额" width="100">
        <template #default="scope">
          ￥{{ scope.row.totalAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="actualAmount" label="实付金额" width="100">
        <template #default="scope">
          ￥{{ scope.row.actualAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100">
        <template #default="scope">
          <el-tag :type="statusType(scope.row.orderStatus)">
            {{ statusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
          <el-button
            size="small"
            type="primary"
            @click="payOrder(scope.row)"
            v-if="scope.row.orderStatus === 0"
            style="margin-left: 4px;"
          >前往支付</el-button>
          <el-button
            size="small"
            type="danger"
            @click="cancelOrder(scope.row)"
            v-if="scope.row.orderStatus === 0"
            style="margin-left: 4px;"
          >取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 24px 0; text-align: right;">
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="total"
        :page-size="size"
        :current-page="page"
        @current-change="handlePageChange"
      />
    </div>
    <el-dialog v-model="detailVisible" title="订单详情" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ detail.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="酒店ID">{{ detail.hotelId }}</el-descriptions-item>
        <el-descriptions-item label="房型">{{ detail.roomType }}</el-descriptions-item>
        <el-descriptions-item label="入住日期">{{ detail.checkInDate }}</el-descriptions-item>
        <el-descriptions-item label="离店日期">{{ detail.checkOutDate }}</el-descriptions-item>
        <el-descriptions-item label="晚数">{{ detail.nights }}</el-descriptions-item>
        <el-descriptions-item label="房间数">{{ detail.roomCount }}</el-descriptions-item>
        <el-descriptions-item label="入住人数">{{ detail.guestCount }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ detail.contactName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ detail.contactPhone }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">￥{{ detail.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="实付金额">￥{{ detail.actualAmount }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{ statusText(detail.orderStatus) }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ paymentText(detail.paymentMethod) }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ formatDate(detail.paymentTime) }}</el-descriptions-item>
        <el-descriptions-item label="取消原因">{{ detail.cancelReason }}</el-descriptions-item>
        <el-descriptions-item label="取消时间">{{ formatDate(detail.cancelTime) }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatDate(detail.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ formatDate(detail.updatedAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const orders = ref([])
const loading = ref(false)
const page = ref(1)
const size = ref(10)
const total = ref(0)
const detailVisible = ref(false)
const detail = ref({})

function statusText(status) {
  switch (status) {
    case 0: return '待支付'
    case 1: return '已支付'
    case 2: return '已确认'
    case 3: return '已入住'
    case 4: return '已完成'
    case 5: return '已取消'
    default: return '未知'
  }
}
function statusType(status) {
  switch (status) {
    case 0: return 'warning'
    case 1: return 'success'
    case 2: return 'info'
    case 3: return 'primary'
    case 4: return 'success'
    case 5: return 'danger'
    default: return ''
  }
}
function paymentText(method) {
  switch (method) {
    case 1: return '微信'
    case 2: return '支付宝'
    case 3: return '银行卡'
    default: return '—'
  }
}
function formatDate(val) {
  if (!val) return '—'
  const d = new Date(val)
  return d.toLocaleString()
}
function viewDetail(order) {
  detail.value = { ...order }
  detailVisible.value = true
}
function payOrder(order) {
  // 调用后端支付宝支付接口，order.orderNo 为订单号，order.totalAmount 为金额
  axios.post(`/HotelPay/pay?orderId=${order.orderNo}&money=${order.totalAmount}`)
    .then(res => {
      if (res.data) {
        window.open(res.data, '_blank', 'width=600,height=600')
      } else {
        ElMessage.error('未获取到支付链接')
      }
    })
    .catch(err => {
      ElMessage.error('调用支付接口失败')
      console.error(err)
    })
}
function cancelOrder(order) {
  ElMessageBox.confirm(
    `确定要取消并删除订单 ${order.orderNo} 吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    axios.post('/HotelOrders/delete', null, {
      params: { orderId: order.id }
    })
    .then(res => {
      ElMessage.success(res.msg || '订单已删除')
      fetchOrders()
    })
    .catch(err => {
      ElMessage.error('删除订单失败')
      console.error(err)
    })
  }).catch(() => {
    // 用户取消操作，无需处理
  })
}

function fetchOrders() {
  loading.value = true
  axios.post('/HotelOrders/list', null, {
    params: {
      page: page.value,
      size: size.value
    }
  })
    .then(res => {
      orders.value = res.data || []
      total.value = res.data.length || 0
    })
    .catch(err => {
      console.error('获取订单失败', err)
      orders.value = []
      total.value = 0
    })
    .finally(() => loading.value = false)
}

function handlePageChange(val) {
  page.value = val
  fetchOrders()
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.hotel-orders-page {
  max-width: 1100px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 32px 24px;
}
.title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 24px;
  color: #1976d2;
  text-align: left;
}
</style>